import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import Vuex from 'vuex'
import './assets/styles/global.styl'
import createRouter from './config/router'
import createStore from './store/store'

// vue 使用插件的方式
// 让以后的节点都能拿到 router
Vue.use(VueRouter)
Vue.use(Vuex)

const router = createRouter()
const store = createStore()

// store 异步加载
store.registerModule('c', {
  state: {
    text: 3
  }
})

// 解除绑定
//store.unregisterModule('c')

// 相当于一个 store 里面的 getter方法
// 第二个方法是 第一个方法的回调函数
// store.watch((state) => state.count + 1, (newCount) => {
//   console.log('new count watched', newCount)
// })

// 订阅 就是个回调函数
// 当任何一个 mutation 被调用了 都可以进行一个操作
// store.subscribe((mutation, state) => {
//   console.log(mutation.type)
//   console.log(mutation.payload)
// })

store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

// 每次跳转的时候都触发钩子
// 可以进行一些 校验
router.beforeEach((to, from, next) => {
  console.log('beforeEach invoked')
  // if (to.fullPath === '/app') {
  //   next('/login')
  // } else {
  //   //TODO
  //   next()
  // }
  next()
})

// 每次跳转的时候都触发钩子
router.beforeResolve((to, from, next) => {
  console.log('before resolve')
  next()
})

// 每次跳转的时候都触发钩子
router.afterEach((to, from) => {
  console.log('after each invoked')
})

new Vue({
  // 在根节点上挂载router, 每个组件里都有这个对象
  router,
  store,
  render: (h) => h(App)
}).$mount('#root')
